<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../src/lib/layui/css/layui.css">
    <link rel="stylesheet" href="../src/style/css/reset.css">
    <link rel="stylesheet" href="../src/style/css/layout.css">
    <link rel="stylesheet" href="../src/style/css/detail.css">
</head>
<body>
    <div class="header"></div>
    <div class="detailBox">
        <div class="intro-wrap w ">
            <div class="p-img-con">
              <!--主图-->
              <div class="main-img-con">
                <div class="goods-shadow" style="cursor: pointer;"></div>
                <img class="main-img" src="{{imageHost}}{{mainImage}}" alt="{{name}}">
              </div>
              <!--缩略图-->
              <ul class="p-img-list">
              {{#subImages}}
                <li class="p-img-item">
                  <img class="p-img" src="{{imageHost}}{{.}}" alt="{{name}}">
                </li>
                {{/subImages}}
              </ul>
            </div>
          
              <div class="p-info-con">
                <h1 class="p-name">{{name}}</h1>
                <div class="p-info-item p-price-con">
                  <span class="label">价格:</span>
                  <span class="info">￥{{price}}</span>
                </div>
          
                <div class="p-info-item">
                  <span class="label">库存:</span>
                  <span class="info">{{stock}}</span>
                </div>
          
                <div class="p-info-item p-count-con">
                  <span class="label">数量:</span>
                  <input class="p-count" value="1" readonly=""/>
                  <span class="p-count-btn plus">+</span>
                  <span class="p-count-btn minus">-</span>
                </div>
          
                <div class="p-info-item">
                  <a class="btn cart-add">加入购物车</a>
                </div> 
              </div>
              <div class="magnifyBox">
                <img src="" class="magnify-img bigImg" />
            </div>
          
            </div>
          
            <div class="detail-wrap w">
              <div class="detail-tab-con">
                <ul class="tab-list">
                  <li class="tab-item active">详细描述</li>
                </ul>
              </div>
          
              <div class="detail-con">
                {{{detail}}}
              </div>
          </div>

    </div>
    
    <div class="footer"></div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../src/lib/layui/layui.all.js"></script>
<script src="../src/js/detail.js" type="module"></script>
</html>